<template name="basics">
	<view>
		<scroll-view scroll-y class="page">
			<image src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png"
			 mode="widthFix" class="response"></image>
			<view class="nav-list">
				<navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in menu" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: "basics",
		data() {
			return {
				elements: [{
						title: '主子表',
						name: 'testData',
						color: 'cyan',
						cuIcon: 'form',
						roles: []
					},
					/* {
						title: '树表',
						name: 'testTree',
						color: 'green',
						cuIcon: 'list'
					},
					{
						title: '文件管理',
						name: 'File',
						color: 'blue',
						cuIcon: 'file'
					}, */
					{
						title: '通讯录',
						name: 'phone',
						color: 'purple',
						cuIcon: 'addressbook',
						roles: []
					}
				]
			};
		},
		computed:{
			...mapState(["roles"]),
			menu:function(){
				// 判断角色的交集
				let menuTemp = [];
				let currentRoles = new Set(this.roles)
				for (let i = 0; i < this.elements.length;i++){
					let accessRoles = new Set(this.elements[i].roles)
					let intersectionSet = new Set([...currentRoles].filter(x => accessRoles.has(x)));
					if(intersectionSet.size > 0 || accessRoles.size == 0){
						menuTemp.push(this.elements[i])
					}
				}
				return menuTemp;
			}
		},
		onShow() {
			console.log("success")
		},
		mounted() {
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
</style>
